<template>
  <table style="display: block;margin-top: 20px;">
    <tbody>
      <tr>
        <td>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="pageSize" :total="totalCount"
            layout="slot, sizes">
            当前共有 {{ totalCount }} 条数据
            当前共有 {{ totalPage }} 页
            当前 {{ currentPage }}/{{ totalPage }} 页
          </el-pagination>
        </td>
        <td>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="pageSize" :total="totalCount"
            layout="slot, prev, pager, next" prev-text="上一页" next-text="下一页" background>
            <el-button class="btn-prev" @click="goToFirstPage" :disabled="currentPage === 1">
              首页
            </el-button>
          </el-pagination>
        </td>
        <td>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="pageSize" :total="totalCount"
            layout="slot, jumper">
            <el-button class="btn-prev" @click="goToLastPage" :disabled="currentPage === totalPage">
              尾页
            </el-button>
          </el-pagination>
        </td>
      </tr>
    </tbody>
  </table>
</template>


<script setup lang="ts">

//定义需要传入的属性
const props = defineProps({
  currentPage: {
    type: Number,
    required: true
  },
  pageSize: {
    type: Number,
    required: true
  },
  totalCount: {
    type: Number,
    required: true
  },
  totalPage: {
    type: Number,
    required: true
  }
});

//定义需要传递的事件
const emit = defineEmits(['size-change', 'current-change']);

const handleSizeChange = (size: number) => {
  emit('size-change', size);
};

const handleCurrentChange = (page: number) => {
  emit('current-change', page);
};

const goToFirstPage = () => {
  handleCurrentChange(1);
};

const goToLastPage = () => {
  handleCurrentChange(props.totalPage); // 使用 props.totalPage
};

</script>

<style scoped>
.btn-prev {
  margin-right: 10px;
}
</style>